<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入的vue.js-->
    <script src="../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../css/index.css">
    <!--引入elementUI的js-->
    <script src="../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="4">
            <el-input v-model="searchForm.stuId"  placeholder="请输入学生编号" size="mini"></el-input>
        </el-col>
        <el-col :span="4">
            <el-input v-model="searchForm.stuName" placeholder="请输入学生名称" size="mini"></el-input>
        </el-col>
        <el-col :span="4">
            <el-input v-model="searchForm.sex" placeholder="请输入性别" size="mini"></el-input>
        </el-col>
        <el-col :span="4">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button size="mini" type="primary" @click="handleAdd">添加</el-button>
        </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="stuId"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="stuName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="180">
        </el-table-column>
        <el-table-column
                prop="height"
                label="身高"
                width="180">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="出生日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="className"
                label="班级名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="province"
                label="籍贯">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="学生名称" :label-width="formLabelWidth" prop="stuName">
                <el-input v-model="form.stuName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身高" :label-width="formLabelWidth" prop="height">
                <el-input v-model.number="form.height" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birthday">
                <el-input v-model="form.birthday" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级名称" :label-width="formLabelWidth" prop="className">
                <el-input v-model="form.className" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth" prop="province">
                <el-input v-model="form.province" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdateForm('form')">确 定</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                tableData: [],
                currentPage:1,
                pageSize:5,
                total:100,
                searchForm:{},
                dialogFormVisible:false,
                form:{stuName:'',sex:'',height:'',birthday:'',className:'',province:''},
                formLabelWidth: '120px',
                rules: {
                    stuName: [
                        { required: true, message: '请输入学生姓名', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请输入性别', trigger: 'blur' },
                        { min: 1, max: 1, message: '长度为1个字符', trigger: 'blur' }
                    ],
                    height: [
                        { required: true, message: '请输入身高', trigger: 'blur' },
                        { type: 'number', message: '身高必须为数字值'}
                    ],
                    birthday: [
                        { required: true, message: '请输入出生日期', trigger: 'blur' },
                    ],
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    province: [
                        { required: true, message: '请输入籍贯', trigger: 'blur' },
                        { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
                    ]
                },
                title: '学生添加',
            }
        },
        created(){
            this.loadData();
        },
        methods: {
            loadData(){
                let _this = this;// 生命周期函数 在页面元素和事件初始化完毕后
                //this代表当前new出来的vue对象
                axios.post('/Day-08-29-SpringBoot-RBAC/student/queryByPage',{
                    "pageNo": this.currentPage,
                    "pageSize": this.pageSize,
                    "data":this.searchForm
                })
                    .then(function (response) {
                        console.log(response);
                        if(response.data.code==200){
                            _this.tableData=response.data.data.list;
                            _this.total=response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.loadData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.loadData();
            },
            search(){
                this.loadData();
            },
            handleAdd(){
                this.title="学生添加"
                this.dialogFormVisible=true;
                this.form={};
            },
            addOrUpdateForm(f1){
                this.$refs[f1].validate((valid) => {
                    if (valid) { // 校验成功，点击提交,执行添加方法
                        let _this = this;// 生命周期函数 在页面元素和事件初始化完毕后
                        //this代表当前new出来的vue对象
                        //定义uri
                        let uri = 'student/add';
                        //判断是添加还是更新
                        if(this.title=="学生更新"){
                            uri = 'student/update';
                        }
                        axios.post('/Day-08-29-SpringBoot-RBAC/'+uri,this.form)
                            .then(function (response) {
                                console.log(response);
                                if(response.data.code==200){
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    _this.loadData();
                                    _this.dialogFormVisible=false;
                                }else {
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*表单重置*/
            resetForm(f2) {
                this.$refs[f2].resetFields();
            },
            handleEdit(index,row){
                this.title="学生更新"
                this.dialogFormVisible=true;
                //JSON.stringify先把json对象转成json字符串，  再使用 JSON.parse把json字符串转json对象  相当于深克隆 把js对象重新来一个新的
                let row1 =  JSON.parse(JSON.stringify(row))
                this.form = row1;
            },
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/Day-08-29-SpringBoot-RBAC/student/deleteById?stuId='+row.stuId)
                        .then(function (response) {
                            console.log(response);
                            if(response.data.code==200){
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                _this.loadData();
                            }else {
                                _this.$message.error('错了哦，这是一条错误消息');
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        }
    })
</script>
</html>